// import { useState } from "react";

// // 子组件
// function Child({ userInfo }) {
//   // render: 初始化 state
//   // re-render: 只恢复初始化的 state 值，不会再重新设置新的值，修改只能用 setName
//   const [name, setName] = useState(userInfo.name);

//   return (
//     <div>
//       {/* props name改变  state name不会改变*/}
//       <p>props name: {userInfo.name}</p>
//       <p>state name: {name}</p>
//     </div>
//   );
// }

// function App() {
//   const [name, setName] = useState("yunmu");
//   const userInfo = { name };

//   return (
//     <div>
//       <div>
//         Parent
//         <button onClick={() => setName("linduidui")}>setName</button>
//       </div>
//       <Child userInfo={userInfo} />
//     </div>
//   );
// }

// export default App;

import { useState, useRef, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  // 模拟 DidMount
  const countRef = useRef(0);
  useEffect(() => {
    console.log("useEffect...", count);

    // 定时任务
    const timer = setInterval(() => {
      console.log("setInterval...", countRef.current);
      setCount(countRef.current++);
      // setCount(count + 1); // 不能正确赋值
    }, 1000);

    // 清除定时任务
    return () => clearTimeout(timer);
  }, []); // 依赖为 []
  // 依赖为 [] 时： re-render 不会重新执行 effect 函数
  // 没有依赖：re-render 会重新执行 effect 函数
  return <div>count: {count}</div>;
}
export default App;
